<template>
	<view class="help-info">
		<view class="">
			信息求助
		</view>
		<!-- <view class="nav-list">
			<view class="item" :class="{'actived':index == tabIndex}" v-for="(item,index) in navList"
				@click="changeTabIndex(index)" :key="index">
				{{item}}
			</view>
		</view>
		<view class="add-info" @click="addInfo()">
			<text>+</text>
			<text>分享信息</text>
		</view>
		<swiper class="swiper" :indicator-dots="false" :autoplay="false" :duration="500" :current="tabIndex"
			@change="onSwiperChange($event)">
			<swiper-item v-for="(item, index) in swiperList" :index="index" :key="index">
				<mescroll-item class="mesItem" v-if="tabIndex == item.id" :index="index" :curIndex=" tabIndex" />
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	import MescrollItem from './mescroll.vue'
	export default {
		components: {
			'mescroll-item': MescrollItem
		},
		data() {
			return {
				tabIndex: 0,
				navList: ['审核通过', '审核中', '审核失败'],
				swiperList: [{
						id: 0
					},
					{
						id: 1
					},
					{
						id: 2
					}
				],
			}
		},
		methods: {
			addInfo() {
				console.log("添加---9527: ", 9527);
			},
			changeTabIndex(index) {
				this.tabIndex = index;
			},
			onSwiperChange(event) {
				const swiperIndex = event.target.current;
				this.tabIndex = swiperIndex;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.help-info {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 15px;
		position: relative;

		.add-info {
			display: flex;
			flex-direction: column;
			width: 40px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			position: absolute;
			right: 5px;
			top: 50%;
			font-size: 20px;
			background: #a7dc39;
			color: white;
			border-radius: 50%;
			transform: translateY(-50%);
		}

		.nav-list {
			display: flex;
			align-items: center;
			margin-bottom: 15px;

			.item {
				width: 80px;
				height: 30px;
				font-size: 15px;
				position: relative;
			}

			.actived {

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 20px;
					width: 0;
					height: 2px;
					background-color: #a7dc39;
					animation: lineAnimation 0.3s forwards;
				}
			}
		}

		.swiper {
			height: 100%;
		}

	}

	@keyframes lineAnimation {
		0% {
			width: 0;
		}

		100% {
			width: 20px;
		}
	}
</style>
